<template>
    <div>
        <tiny-grid :data="tableData" :tree-config="{ children: 'children' }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
      <tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
      <tiny-grid-column 
      field="name" 
      title="菜单名称"
       :editor="{ component: 'input', events: { input} }"
      ></tiny-grid-column>
      <tiny-grid-column 
      field="path" 
      title="菜单路径"
       :editor="{ component: 'input', events: { input } }"
      ></tiny-grid-column>
      <tiny-grid-column 
      field="component" 
      title="菜单组件路径"
       :editor="{ component: 'input', events: { input } }"
      ></tiny-grid-column>
      <tiny-grid-column 
      field="icon" 
      title="菜单图标"
       :editor="{ component: 'input', events: { input } }"
      ></tiny-grid-column>
      <tiny-grid-column 
      field="sort" 
      title="排序"
       :editor="{ component: 'input', events: { input } }"
      ></tiny-grid-column>
      <tiny-grid-column title="操作" width="100">
        <template v-slot="data">

          <tiny-button v-if="data.row.id != '0'" size="mini" @click="saveData(data.row)">保存</tiny-button>
        </template>
        </tiny-grid-column>
    </tiny-grid>
    </div>
</template>

<script setup lang="ts">
import {  ref, onMounted } from 'vue'
import { Grid as tinyGrid, GridColumn as tinyGridColumn, Notify, Button as tinyButton } from '@opentiny/vue'
import { getMenuList, saveMenu } from '../../api/menu/http'
let tableData = ref([]);
 onMounted(async () => {
    let res: any =  await getMenuList()
    console.log(res)
    tableData.value = res.data
})

    function input() {
      console.log(arguments)
    }

    function saveData(row: object) {
      saveMenu(row).then(res=>{
        if(res.code == 200){
          getMenuList().then(res=>{
            tableData.value = res.data
          })
          Notify({
            type: 'success',
            message: '保存成功',
            position: 'top-right'
          })
        }
       
      })
    }
</script>

<style scoped>

</style>